<template>
	<view class="createQrcode">
		<view class="tagsBox">
			<view class="tagItem">
				<image src="../../../static/svg/wifi_red.svg" class="icon"></image>
				<text>一键快速连接</text>
			</view>
			<view class="tagItem">
				<image src="../../../static/svg/lock.svg" class="icon"></image>
				<text>无需告知密码</text>
			</view>
			<view class="tagItem">
				<image src="../../../static/svg/safe.svg" class="icon"></image>
				<text>安全防蹭网</text>
			</view>
		</view>

		<view class="qrcodeInfo">
			<view class="row">
				<view class="name">昵称/名称 :</view>
				<input v-model="wifiForm.name" type="text" placeholder="请输入昵称/名称" class="input"  />
		
			</view>
			<view class="row">
				<view class="name">WIFI名称 :</view>
				<input v-model="wifiForm.ssId" type="text" placeholder="请输入WIFI名称" class="input" />
			</view>
			<view class="row">
				<view class="name">WIFI密码 :</view>
				<input v-model="wifiForm.password" type="text" placeholder="请输入WIFI密码" class="input"  />
			</view>
			<view class="row">
				<image src="../../../static/img/warn.png" class="icon"></image>
				<text class="tips">WIFI密码不会被共享，请放心填写</text>
			</view>
		</view>
		
		<view class="createQrcodebtn" @click="updateQrcodebtn">修改WIFI信息</view>

	</view>
</template>

<script>
	import { getWifiDetail, updateWifi } from '@/api/login/login'
	
	export default {
		data() {
			return {
				wifiForm: {
				  wfId: null,	
				  name: "",
				  ssId: "",
				  password: "",
				  subUnionId: ""
				}
			}
		},
		onLoad(options) {
			console.log('传递的参数:', options); // 输出 '12345'
			
		},
		onShow() {
			this.getWifI();
		},
		methods: {
			getWifI() {
				uni.showLoading({
				        title: '加载中...'
				});
				let wfId = uni.getStorageSync("editQrCodeWfId");
				let query = {
					wfId: wfId
				}
				getWifiDetail(query).then(res2 => {
					if (res2.code == '200') {
						this.wifiForm.wfId = res2.data.wfId;
						this.wifiForm.name = res2.data.name;
						this.wifiForm.ssId = res2.data.ssId;
						this.wifiForm.password = res2.data.password;
						this.wifiForm.subUnionId = res2.data.subUnionId;
						uni.hideLoading();
					} else {
						uni.hideLoading();
					}
				});
			},

			updateQrcodebtn() {
				// 校验数据
				if (!this.wifiForm.name || !this.wifiForm.ssId || !this.wifiForm.password) {
					uni.showToast({
					  title: '请确保所有字段都已填写！',
					  icon: 'none'
					});
				} else {
					if (this.wifiForm.password.length <= 7) {
						uni.showToast({
						  title: 'WiFI密码要大于等于8位！',
						  icon: 'none'
						});
					} else {
						// 接口请求开始
						uni.showLoading({
						        title: '加载中...'
						});
						updateWifi(this.wifiForm).then(res2 => {
							if (res2.code == '200') {
								uni.hideLoading();
								uni.navigateTo({
									url:'/pages/home/manageQrcode/manageQrcode'
								})
							} else {
								uni.hideLoading();
							}
						});
					}
				}
				
			},
		},
		onLoad(options) {
			this.id=options.id||null
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../../static/style/mixin.scss';
	.createQrcode {
		@include bg2;
		min-height: 100vh;
		.tagsBox {
			width: 720upx;
			height: 50upx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.tagItem {
				display: flex;
				align-items: center;

				.icon {
					width: 30upx;
					height: 30upx;
					margin-right: 10upx;
				}

				text {
					font-size: 25upx;
					opacity: 0.8;
				}
			}
		}

		.qrcodeInfo {
			box-sizing: border-box;
			width: 720upx;
			border-radius: 10upx;
			background-color: #fff;
			padding: 20upx;
			margin: 20upx auto;

			.row {
				display: flex;
				align-items: center;
				height: 80upx;
				margin-top: 5upx;

				.name {
					padding: 20upx;
					width: 160upx;
					text-align: right;
				}

				.input {}
				.icon{
					width: 30upx;
					height: 30upx;
					margin-left: 50upx;
				}
				.tips{
					font-size: 30upx;
					color: aqua;
				}
			}
		}
		
		.createQrcodebtn{
			width: 720upx;
			height: 100upx;
			border-radius: 10upx;
			background-color: #00ffff50;
			font-size: 40upx;
			@include cc;
			margin: 20upx auto;
		}
	}
</style>
